<template>
    <div class="search-box">
      <i class="icon-search"></i>
      <input class="box" :placeholder="placeholder" v-model="query" ref="query"/>
      <i class="icon-dismiss" v-show="query" @click="clear"></i>
    </div>
</template>

<script>
import {debounce} from 'common/js/utill'
export default {
  name: 'search-box',
  props: {
    placeholder: {
      type: String,
      default: '搜索歌曲、歌手'
    }
  },
  data () {
    return {
      query: ''
    }
  },
  created () {
    // 跟watch函数方法一个意思,实施节流函数
    this.$watch('query', debounce((newQuery) => {
      this.$emit('query', newQuery)
    }, 200))
  },
  methods: {
    clear () {
      this.query = ''
    },
    setQuery (query) {
      this.query = query
    },
    blur () {
      this.$refs.query.blur()
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import "~common/stylus/variable"
  .search-box
    display flex
    align-items center
    box-sizing border-box
    width 100%
    height 40px
    background $color-highlight-background
    border-radius 6px
    .icon-search
      font-size 24px
      color $color-background
    .box
      flex 1
      margin 0 5px
      line-height 18px
      background $color-highlight-background
      color $color-text
      font-size $font-size-medium
      &::placeholder
        color $color-text-d
    .icon-dismiss
      font-size 16px
      color $color-background
</style>
